<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 20:18:30
 * @LastEditors: Sam
 * @LastEditTime: 2023-01-05 10:19:46
-->
<template>
    <div class="app-container">
        <div class="tech-border-out">
            <div class="tech-border">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>用户列表</span>
                    </div>
                    <div class="filter-container">
                        <el-input v-model="listQuery.searchword" :placeholder="'请输入关键字'" clearable style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />


                        <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                        {{ '搜索' }}
                        </el-button>
                        <!-- <el-button v-waves :disabled="!checkPermission(['user.create'])" class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                        {{ '添加' }}
                        </el-button> -->
                        <el-button v-waves class="filter-item" type="success" icon="el-icon-upload2" @click="handleExport">
                        {{ '导出' }}
                        </el-button>
                            <!-- <el-upload
                            class="import"
                            :action="import_url"
                            accept=".xlsx"
                            @before-upload="beforeImport"
                            :headers ="headerObj"
                            :on-success="handleImport"
                            :show-file-list="false"
                            >
                                <el-button icon="el-icon-download" type="primary">导入</el-button>
                            </el-upload> -->
                    </div>
                    <el-table
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                        :data="list"
                        border
                        fit
                        highlight-current-row
                        style="width: 100%"
                        size="mini"
                        >   
                        <el-table-column width="150px" :label="'ID'">
                        <template slot-scope="scope">
                            <span>{{ scope.row.id }}</span>
                        </template>
                        </el-table-column>

                        <el-table-column  :label="'昵称'">
                        <template slot-scope="scope">
                            <span>{{ scope.row.nickname }}</span>
                        </template>
                        </el-table-column>

                        <el-table-column  :label="'头像'" align="center">
                            <template slot-scope="scope" v-if="scope.row.avatar">
                                <el-image   :preview-src-list="scope.row.avatar.split(',')" style="width: 50px; height: 50px" :src="scope.row.avatar" fit="cover"></el-image>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" :label="'手机号'">
                        <template slot-scope="scope">
                        <span>{{ scope.row.mobile }}</span>
                        </template>
                        </el-table-column>

                        <el-table-column width="160px" align="center" :label="'添加时间'">
                        <template slot-scope="scope">
                            <span>{{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                        </template>
                        </el-table-column>

                        <el-table-column align="center" :label="'操作'" width="350">
                            <template slot-scope="scope">
                                <el-button :disabled="!checkPermission(['user.detail'])" type="primary" size="mini" icon="el-icon-info" @click="handleDetail(scope.$index, scope.row)">
                                {{ '详情' }}
                                </el-button>
                                <el-button :disabled="!checkPermission(['user.edit'])" type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                                {{ '编辑' }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
                </el-card>
            </div>
        </div>
      
          <el-dialog :title="'用户详情'" :visible.sync="detail.dialogVisible">
            <detail :data="detail.data" />
         </el-dialog>
         <el-dialog :title="'编辑用户'" :visible.sync="edit.dialogVisible"  @close="getList" :close-on-click-modal=false>
            <edit :item="edit" />
         </el-dialog>
        <el-dialog :title="'添加用户'" :visible.sync="create.dialogVisible" @close="getList" :close-on-click-modal=false>
            <create :item="create" />
        </el-dialog>
    </div>
</template>
<style scoped>
    .import {
        display: inline-block;
        margin-left: 5px;
    }
</style>
<script>
    import {export_excell} from '@/api/export_excell' // 导出
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list, detail, del,edit } from '@/api/user_list'
    import Detail from '@/components/Detail/detail'
    import Create from './components/Create'
    import Edit from './components/Edit'
    import { parseTime } from '@/utils'
    import { getToken } from '@/utils/auth'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    export default{
        name: 'UserIndex',
        components: { Pagination,Detail,Create,Edit },
        filters: {
            parseTime
        },
        directives: { waves, permission },
          data() {
            return {
            headerObj: {
                'Authorization': 'Bearer ' + getToken()
            },
            list: null,
            total: 0,
            select_ids : [],
            listQuery: {
                page: 1,
                limit: 10,
                is_excell:0
            },
            import_url: process.env.VUE_APP_BASE_API+'/admin/user_import_excell',
            create: {
                dialogVisible: false
            },
     
            detail: {
                dialogVisible: false,
                data: []
            },
             edit: { // 编辑
                dialogVisible: false,
                id: ''
            }
            }
        },
          created() {
            this.getList()
        },
        methods: {
            beforeImport(){
                // this.listLoading = true;
            },
            handleImport(res) { // 导入
                if(!res.code) {
                    this.$message.error(res.msg)
                    // this.listLoading = false;
                } else {
                    // this.listLoading = false;
                    this.$message.success(res.msg);
                    this.getList()
                }
            },
            checkPermission,
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            handleCreate() {
              this.create.dialogVisible = true
            },

            handleExport(){
                let query="";
                for ( let key in this.listQuery) {
                    query+= `${key}=${this.listQuery[key]}&`
                }
                window.location.href = process.env.VUE_APP_BASE_API + `admin/user_export_excell?${query}`;
                // this.$router.push(process.env.VUE_APP_BASE_API + 'admin/user_export_excell',this.listQuery)
                // export_excell(process.env.VUE_APP_BASE_API + 'admin/user_export_excell',this.listQuery);
            },
             handleEdit(index, row) { // 编辑对话框显示
              this.edit.dialogVisible = true
              this.edit.id = row.id
            },
            handleDetail(index, row) {
                detail(row.id).then((res) => {
                        this.detail.dialogVisible = true
                        const data = res.data
                        this.detail.data = [
                        {
                            name: 'ID',
                            content: data.id,
                            type: 'text'
                        },
                        {
                            name: 'openid',
                            content: data.openid,
                            type: 'text'
                        },
                        {
                            name: '昵称',
                            content: data.nickname,
                            type: 'text'
                        },
                        {
                            name: '头像',
                            content: data.avatar,
                            type: 'image'
                        },
                        {
                            name: '手机号',
                            content: data.mobile,
                            type: 'text'
                        },
                        {
                            name: '加入时间',
                            content: data.create_time,
                            type: 'time'
                        },
                        ]
                    })
                    },
            getList() {
                // this.listLoading = true
                list(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                        // this.listLoading = false
                    })
                },
            }
    }
</script>

